<template>
  <BasicModal
    v-bind="$attrs"
    :width="modalWidth"
    @register="registerModal"
    @ok="handleOK"
   :title="t('sys.script.details')"
  >
    <BasicTable @register="registerTable" />
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, h } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTable, useTable } from '@/components/Table';
  import { detailTaskPage, deviceToOwnerAPI, detailTaskPageDevAPI } from '@/api/demo/Task';
  import { Tooltip } from 'ant-design-vue';
  import { useI18n } from "@/hooks/web/useI18n";

  const { t } = useI18n()
  const emit = defineEmits(['success']);
  const Data = ref<any>([]); // 定义 Data 为响应式变量
  const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  defineOptions({ name: 'AccountModal' });

  const modalWidth = ref('85%');

  const columns = ref([
    {
      title: 'id',
      dataIndex: 'id',
      width: 50,
    },
    {
      title: '视频链接',
      dataIndex: 'link',
      width: 100,
      customRender: ({ text }: { text: string }) => {
        return h(
          Tooltip,
          {
            title: text,
          },
          [
            h(
              'a',
              {
                href: text, // 添加 href 属性
                target: '_blank', // 在新标签页中打开链接
                style: {
                  display: 'inline-block',
                  width: '100%',
                  height: 'auto',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                },
              },
              text,
            ),
          ],
        );
      },
    },
    {
      title:  t('sys.audienceGroup.mac'),
      dataIndex: 'chat',
      width: 100,
    },
    {
      title: '是否收藏',
      dataIndex: 'collect',
      width: 50,
      customRender: ({ text }) => {
        return text === '1' ? t('sys.configuration.YES') : t('sys.configuration.NO');
      },
    },
    {
      title: t('sys.comment.columns.comment'),
      dataIndex: 'comment',
      width: 100,
    },
    {
      title: '是否点赞',
      dataIndex: 'upvote',
      width: 50,
      customRender: ({ text }) => {
        return text === '1' ? t('sys.configuration.YES') : t('sys.configuration.NO');
      },
    },
    {
      title: t('sys.device.columns.devicecode'),
      dataIndex: 'device',
      width: 100,
    },
    {
      title: '设备备注',
      dataIndex: 'deviceName',
      width: 50,
    },
    {
      title: t('sys.analysis.columns.status'),
      dataIndex: 'status',
      width: 50,
      customRender: ({ text }) => {
        const statusMap = {
          2: '完成',
          1: '已分发',
          0: '未分发',
        };
        return statusMap[text] || t('sys.code.columns.unknownState');
      },
    },
    {
      title: '分发时间',
      dataIndex: 'distributeTime',
      width: 100,
    },
    {
      title: '成功时间',
      dataIndex: 'successTime',
      width: 100,
    },
  ]);

  const [registerTable, { reload }] = useTable({
    columns: columns.value,
    dataSource: Data,
    bordered: true,
    showIndexColumn:false,
    pagination: pagination.value,
    onChange: (page, pageSize) => {
      pagination.value.current = page;
      pagination.value.pageSize = pageSize;
      fetchData(pagination.value);
    },
  });

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: true, showOkBtn: false });
    if (data.routers == t('sys.device.title')) {
      await fetchData({
        device: data.record.device,
        current: pagination.value.current,
        size: pagination.value.pageSize,
      });
    } else {
      await fetchData({
        taskId: data.record.id,
        current: pagination.value.current,
        size: pagination.value.pageSize,
      });
    }
  });

  async function fetchData(params) {
    let response = {};
    const deviceName = await deviceToOwnerAPI();
    if (params.taskId) {
      response = await detailTaskPage(params);
    } else {
      //设备管理
      response = await detailTaskPageDevAPI(params);
    }

    const deviceNameMap = deviceName.data.reduce((map, item) => {
      map[item.label] = item.value;
      return map;
    }, {});
    Data.value = response.data.records.map((record) => ({
      ...record,
      deviceName: deviceNameMap[record.device] || '未知设备',
    }));

    pagination.value.total = response.total;
    reload();
  }

  async function handleOK() {
    emit('success', {}); // 触发 success 事件
    closeModal();
  }
</script>
<style scoped>
  .divList {
    padding: 10px;
  }
  .divList > span {
    margin-right: 30px;
  }
</style>
